<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>老师评价统计</title>
</head>

<body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <p>
        <a href="/">返回首页</a>
    </p>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.min.js" type="application/javascript"></script>
    <script>
        var myChart = echarts.init(document.querySelector('#main'))
        debugger;

        var option = {
            color: ['#f00', '#00f'],
            title: {
                text: '老师评价统计图'
            },
            tooltip: {},
            legend: {
                data: ['好评', '差评']
            },
            xAxis: {
                data: Array.from({{names | safe}})
            },
            yAxis: {},
            series: [
                {
                    name: '好评',
                    type: 'bar',
                    data: Array.from({{good | safe}})
                },
                {
                    name: '差评',
                    type: 'bar',
                    data: Array.from({{bad | safe}})
                }
            ]
        }
        myChart.setOption(option)
    </script>
</body>

</html>